<template>
	<view class="orderPage">
		<view class="part1">
			<image @click="backtoIndex" src="../../static/img/Return.png"></image>
			<view class="name">{{JDname}}</view>
		</view>
		<view class="orderSwiper">
			<swiper :indicator-dots="true" :interval="2000" :duration="1000">
				<swiper-item>
					<image src="../../static/img/my/user.jpg" mode=""></image>
				</swiper-item>
				<swiper-item>
					<image src="../../static/img/my/user.jpg" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 酒店预定详情页 -->
		<view class="orderkinds">
			<view class="orderDate">
				<view class="Date">
					<view class="uni-list-cell-left">
						入住日期:
					</view>
					<view class="uni-list-cell-db">
						<picker mode="date" :value="date1" :start="startDate" :end="endDate" @change="bindDateChange1">
							<view class="uni-input">{{date1}}</view>
						</picker>
					</view>
				</view>
				<view class="Date">
					<view class="uni-list-cell-left">
						退房日期:
					</view>
					<view class="uni-list-cell-db">
						<picker mode="date" :value="date2" :start="startDate" :end="endDate" @change="bindDateChange2">
							<view class="uni-input">{{date2}}</view>
						</picker>
					</view>
				</view>
			</view>
			<view v-for="(item,index) in orderKinds" :key="index" 
				class="orderKind" 
				@click="gotopayDetails(item)"
				>
				<view class="room">{{item.room}}</view>
				<view class="prices">
					<view class="pprice">{{item.pprice}}</view>
					<view class="price">￥{{item.price}}</view>
				</view>
				<view class="startOrder" >立即预定</view>
			</view>
		</view>
		<!-- 用户评价 -->
		<view class="userValuation">
			用户评价:
		</view>
		<view class="valution-content">
				<view>
					<text>18896341765</text>
					<view>服务周到，环境良好</view>
				</view>
				<view class="collect">*****</view>
		</view>
		<view class="valution-content">
				<view>
					<text>18896341765</text>
					<view>服务周到，环境良好</view>
				</view>
				<view class="collect">*****</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			 const currentDate = this.getDate({
					format: true
				})
			return {
				//入住日期
				date1: currentDate,
				// 退房日期
				date2: currentDate,
				// 酒店名称
				JDname:"星光国际大酒店",
				orderKinds:[
					{room:"商务房",pprice:"门店价:￥358",price:"328"},
					{room:"双人房",pprice:"门店价:￥258",price:"248"},
					{room:"标准房",pprice:"门店价:￥248",price:"238"},
					{room:"钟点房",pprice:"门店价:￥158",price:"148"},
				]
			}
		},
		onLoad(option) {
			this.JDname = option.name
			console.log(option)
		},
		computed: {
			startDate() {
					return this.getDate('start');
			},
			endDate() {
					return this.getDate('end');
			}
			},
		methods: {
			// 返回酒店首页
			backtoIndex() {
				uni.switchTab({
					url:"../index/index"
				})
			},
			// 跳转到预定详情页
			gotopayDetails(item){
				uni.navigateTo({
					url:`../orderDetails/orderDetails?startdate=${this.date1}&enddate=${this.date2}&JDname=${this.JDname}
					&room=${item.room}&price=${item.price}`,
				})
			},
			// 获取入住日期
			bindDateChange1: function(e) {
					this.date1 = e.detail.value
					console.log(this.date1)
			},
			// 获取退房日期
			bindDateChange2: function(e) {
					this.date2 = e.detail.value
					console.log(this.date2)
			},
			// 获取日期
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
						year = year - 60;
				} else if (type === 'end') {
						year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="less" scoped>
// @bgcColor:#00A0FF;
@bgcColor:"skyblue";
.orderPage {
	width: 100%;
	height: 100%;
	background-color: skyblue;
}

/* 酒店头部信息 */
.part1{
	display: flex;
	height: 100rpx;
	font-size: 50rpx;
	background-color:@bgcColor;
}
.part1 image{
	flex: 1.5;
	width: 80rpx;
	height: 80rpx;
	margin-top: 10rpx;
}
.name{
	flex: 8;
	color: white;
	margin-top: 14rpx;
	margin-left: 150rpx;
	/* align-items: center; */
}
/* 轮播图 */
swiper-item image {
	width: 100%;
	height: 300rpx;
}
/* 房间预订类型 */
.orderkinds {
	margin-top: 20rpx;
}
.orderDate {
	display: flex;
	justify-content: space-around;
	margin-bottom: 20rpx;
	background-color: skyblue;
}
.Date {
	display: flex;
	border: 2rpx 2rpx solid #8a8a8a;
}
.uni-list-cell-db {
	margin-left: 10rpx;
}
.orderKind {
	display: flex;
	padding: 30rpx 0;
	justify-content: space-around;
	border-bottom: 2rpx solid #17abe3;
	background-color: #fff;
	text-align: center;
}
.room {
	font-size: 32rpx;
	font-weight: 400;
}
.prices {
	display: flex;
	justify-content: center;
}
.pprice {
	font-size: 28rpx;
	color: skyblue;
	text-decoration: line-through;
}
.price {
	font-size: 28rpx;
}
.startOrder {
	font-size: 28rpx;
	background-color: yellow;
	border: 2rpx 2rpx solid;
	text-align: center;
}
/* 评价部分 */
.userValuation{
	width: 100%;
	margin-top: 20rpx;
	padding-left: 20rpx;
	background-color: #fff;
}
.valution-content {
	display:flex;
	justify-content: space-between;
	background-color: #fff;
	border-bottom: 5rpx solid #8a8a8a;
	padding-left: 20rpx;
}
.collect {
	align-items: center;
	margin-right: 40rpx;
}
</style>
